<template>
    <AsKeyBoard :style="cmPos" :ujt="ujt"></AsKeyBoard>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    ujt: any;
}

const props = defineProps<Props>();

const { $global } = props.ujt;

const cmPos = computed(() => {
    const tmStyle: any = {
        minHeight: $global.keyboard.params?.pos?.minHeight || 200,
        minWidth: $global.keyboard.params?.pos?.minWidth || 400,
        height: $global.keyboard.params?.pos?.height || 200,
        width: $global.keyboard.params?.pos?.width || 500,
    };
    if ($global.keyboard.params?.pos) {
        if ($global.keyboard.params.pos.x * 2 > $global.keyboard.params.pos.w) {
            tmStyle.right =
                $global.keyboard.params.pos.w - $global.keyboard.params.pos.x;
        } else {
            tmStyle.left = $global.keyboard.params.pos.x;
        }
        if ($global.keyboard.params.pos.y * 2 > $global.keyboard.params.pos.h) {
            tmStyle.bottom =
                $global.keyboard.params.pos.h -
                $global.keyboard.params.pos.y +
                28;
        } else {
            tmStyle.top = $global.keyboard.params.pos.y + 28;
        }
        let tmpVal =
            $global.keyboard.params.pos.w - (tmStyle.right || tmStyle.left);
        if (tmpVal < tmStyle.width) {
            tmStyle.width = tmpVal;
        }
        tmpVal = $global.keyboard.params.pos.h - (tmStyle.top || tmStyle.bottom);
        if (tmpVal < tmStyle.height) {
            tmStyle.height = tmpVal;
        }
        tmStyle.top && (tmStyle.top += 'px');
        tmStyle.bottom && (tmStyle.bottom += 'px');
        tmStyle.left && (tmStyle.left += 'px');
        tmStyle.right && (tmStyle.right += 'px');
        tmStyle.height += 'px';
        tmStyle.width += 'px';
    }
    return tmStyle;
});
</script>

<style scoped></style>
